{% extends "admin/base.html" %}

{% block content %}
<div class="content-header d-flex justify-content-between align-items-center">
    <h1>模型切换</h1>
    <!-- 添加模板按钮 -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#templateModal">
        <i class="bi bi-plus-circle"></i> 添加命令模板
    </button>
</div>

<div class="row">
    <div class="col-md-12">
        <!-- 命令模板列表 -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">命令模板</h5>
            </div>
            <div class="card-body">
                {% if templates %}
                <div class="row">
                    {% for template in templates %}
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="card h-100 border-0 shadow-sm" style="border-radius: 12px; overflow: hidden;">
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <h5 class="card-title mb-0">{{ template.name }}</h5>
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="bi bi-three-dots"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <button class="dropdown-item" type="button" 
                                                        onclick="editTemplate({{ template.id }}, '{{ template.name }}', '{{ template.description }}', `{{ template.command }}`)">
                                                    <i class="bi bi-pencil"></i> 编辑
                                                </button>
                                            </li>
                                            <li>
                                                <form method="POST" class="d-inline">
                                                    <input type="hidden" name="delete_template" value="{{ template.id }}">
                                                    <button type="submit" class="dropdown-item" 
                                                            onclick="return confirm('确定要删除这个模板吗？')">
                                                        <i class="bi bi-trash"></i> 删除
                                                    </button>
                                                </form>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <p class="card-text flex-grow-1 text-muted" style="font-size: 0.9rem;">{{ template.description or '无描述' }}</p>
                                <div class="mt-3">
                                    <small class="d-block text-truncate text-muted mb-2" 
                                           data-bs-toggle="tooltip" 
                                           data-bs-placement="top" 
                                           title="{{ template.command }}"
                                           style="font-family: monospace;">
                                        <i class="bi bi-terminal"></i> {{ template.command }}
                                    </small>
                                    <form method="POST" class="d-inline">
                                        <input type="hidden" name="execute_template" value="{{ template.id }}">
                                        <button type="submit" class="btn btn-primary btn-sm w-100">
                                            <i class="bi bi-play-circle"></i> 执行
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-inbox text-muted" style="font-size: 3rem;"></i>
                    <p class="mt-3">暂无命令模板，请添加。</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 模板模态框 -->
<div class="modal fade" id="templateModal" tabindex="-1" aria-labelledby="templateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 15px;">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold" id="templateModalLabel">添加命令模板</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-0">
                <form method="POST" id="templateForm">
                    <input type="hidden" name="template_id" id="template_id">
                    <div class="mb-4">
                        <label for="modal_template_name" class="form-label fw-bold">模板名称</label>
                        <input type="text" class="form-control form-control-lg" id="modal_template_name" name="template_name" placeholder="请输入模板名称">
                    </div>
                    <div class="mb-4">
                        <label for="modal_template_description" class="form-label fw-bold">命令作用描述</label>
                        <textarea class="form-control" id="modal_template_description" name="template_description" rows="3" placeholder="请输入命令作用描述"></textarea>
                    </div>
                    <div class="mb-4">
                        <label for="modal_template_command" class="form-label fw-bold">Ubuntu命令</label>
                        <textarea class="form-control font-monospace" id="modal_template_command" name="template_command" rows="4" placeholder="请输入要执行的Ubuntu命令"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-lg btn-outline-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-lg btn-primary" id="submit_btn" onclick="submitForm()">添加模板</button>
            </div>
        </div>
    </div>
</div>

<script>
    // 初始化工具提示
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });

    // 编辑模板函数
    function editTemplate(id, name, description, command) {
        document.getElementById('template_id').value = id;
        document.getElementById('modal_template_name').value = name;
        document.getElementById('modal_template_description').value = description;
        document.getElementById('modal_template_command').value = command;
        document.getElementById('submit_btn').textContent = '更新模板';
        
        // 更新模态框标题
        document.getElementById('templateModalLabel').textContent = '编辑命令模板';
        
        // 显示模态框
        var modal = new bootstrap.Modal(document.getElementById('templateModal'));
        modal.show();
    }
    
    // 提交表单函数
    function submitForm() {
        document.getElementById('templateForm').submit();
    }
    
    // 模态框隐藏时重置表单
    document.getElementById('templateModal').addEventListener('hidden.bs.modal', function () {
        document.getElementById('templateForm').reset();
        document.getElementById('template_id').value = '';
        document.getElementById('submit_btn').textContent = '添加模板';
        // 重置模态框标题
        document.getElementById('templateModalLabel').textContent = '添加命令模板';
    });
</script>
{% endblock %}
</file4>